01 Importando scripts

Vimos como tratar arquivos CSS como módulos e depois, mantê-los separados do bundle.js, sendo a melhor opção importá-lo pela tag <link>. Porém, o que devemos fazer para importar scripts e tratá-los como módulos da aplicação. Normalmente, os scripts já são importados pela tag <script>. Nós não queremos fazer isso, porque queremos que o Webpack gere o bundle.js, e processe os módulos.

Dentro do node_modules, temos a pasta bootstrap - que possui a dist, onde encontraremos vários plugins js do bootstrap.

No caso, vamos carregar apenas o plugin do modal, que não será necessário no projeto, mas ficará pronto para o caso de fazermos o modal, ele já deve estar carregado. Por exemplo, veremos como carregar um script do Bootstrap na aplicação.

Assim que a aplicação for carregada no app.js, após importarmos o CSS do bootstrap, será a vez ser de importar o modal.js .

import { NegociacaoController } from './controllers/NegociacaoController.js';
import { Negociacao } from './domain/index.js';
import 'booststrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import 'bootstrap/js/modal.js';
import 'css/meucss.css';

O Webpack vai entender que estamos procurando model.js, dentro de "node_module > bootstrap > js". Se subirmos novamente o servidor no Terminal e recarregarmos a aplicação, veremos que algo deixou de funcionar. Se investigarmos no Console, encontraremos um aviso informando que jQuery não foi definido.

Uncaught Error: Bootstrap's JavaScript requires jQuery

Isto está acontecendo porque quando carregamos o modal do Booststrap, este dependerá do jQuery para que o modal funcione. Trata-se de uma dependência do booststrap. Então precisaremos instalar o jQuery:

npm install jquery@3.2.1 --save

Em seguida, se analisarmos a pasta node_modules, acessaremos "jquery > dist", e depois, encontraremos os arquivos jquery. Iremos importar o arquivo no app.js, antes do modal.js.

import { NegociacaoController } from './controllers/NegociacaoController.js';
import { Negociacao } from './domain/index.js';
import 'booststrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import 'jquery/dist/jquery.js';
import 'bootstrap/js/modal.js';
import 'css/meucss.css';

Porém, se tentarmos rodar novamente a aplicação, receberemos a mesma mensagem de erro. Isto porque estamos tratando o jquery e o modal como módulos. Cada módulos é uma unidade confinada de código, logo, jQuery não está no escopo global. Por estar confinado dentro de um módulo, ele não é acessível para Bootstrap.

Mas podemos permanecer tranquilos. Nós não queremos que o jQuery fique em uma closure, mas sim no escopo global - uma exigência do modal do `Bootstrap. Em uma situação na qual precisamos de uma biblioteca que esteja no escopo global, precisaremos fazer uma "manobra" para que isso seja possível no Webpack.

Faremos isso a seguir.